<template>
	<view class="container">
		<my-cu-custom :contentClass="'cu-custom-content-gradient-bg'" :cuCustomTop="15" ref="myCuCustom"
			
		:goVideo="false"
		>
			<block slot="content">
				<view class="text-black text-blod">
					我的
				</view>
			</block>
		</my-cu-custom>
		
		<view class="page-body padding-sm padding-right-lg">
			<view v-if="isLogin" class="my-top flex justify-between align-center">
				<view class="flex align-center">
					<u-avatar size="60" :src="userInfo.wx_user.avatar||'/static/login.png'"></u-avatar>
					<view class="margin-left-sm">
						<view class="text-xl text-black text-blod">
							{{ userInfo.wx_user.nickname||'微信用户' }}
						</view>
						<view class="margin-top-sm">
							邀请码:{{ userInfo.invite_code||'*****' }}
						</view>
					</view>
				</view>
				<view class="">
					ID:{{ userInfo.id||'*****' }}
				</view>
			</view>
			<view v-else class="my-top flex justify-around align-center">
				<button class="cu-btn round bg-blue lg"  @click="toPage('/pages/login/index')">前往登陆</button>
			</view>
			
			<view  v-if="isLogin" class="my-card radius-10 padding margin-top-sm"  style="width: 100%;" :style="{'background':'url(https://cdn.uviewui.com/uview/swiper/swiper3.png) no-repeat 100%/100%'}">
				<view class="flex justify-between" >
					<view class="text-blod text-xxl">
						管家
					</view>
					<view class="">
						<button class="cu-btn round bg-orange shadow">去完成</button>
					</view>
				</view>
				<view class="margin-top-xl">
					desc
				</view>
			</view>
			
			<view class="my-number radius-lg margin-top-sm bg-white padding-sm">
				<view class="solid-bottom flex justify-between padding-bottom-sm">
					<view class="text-lg text-blod">
						我的收益
					</view>
					<view class="flex" @click="showLog(1)">
						明细<u-icon name="arrow-right" color="" size="14" labelPos="right"></u-icon>
					</view>
				</view>
				<view class="grid col-2 text-center padding-top-sm solid-bottom padding-bottom-sm">
					<view class="bd-r solid-right padding-right-sm">
						<view class="text-shadow text-blod text-lg text-left">
							我的余额
						</view>
						<view class="flex justify-between margin-top-sm align-center">
							<view class="text-red text-xl">
								{{ userInfo.blance }}
							</view>
							<button class="cu-btn round line-red"  @click="toPage('/pages/my/withdraw')">提现</button>
						</view>
					</view>
					<view class="bd-r text-center">
						<view class="text-shadow text-blod text-lg flex justify-end"  @click="showLog(2)">
							累计自用返利<u-icon name="arrow-right" color="" size="14" labelPos="right"></u-icon>
						</view>
						<view class="text-red margin-top-sm text-xl" style="margin-top: 35rpx;">
							{{ userInfo.total_self_blance }}
						</view>
					</view>
				</view>
				
				<view class="grid col-3 text-center margin-top-lg">
					<view class="bd-r solid-right">
						<view class="text-shadow text-blod text-lg"  @click="showLog(3)">
							累计收益<text class="cuIcon-right"></text>
						</view>
						<view class="text-red text-xl margin-top-sm">
							{{ userInfo.total_amt }}
						</view>
					</view>
					<view class="bd-r solid-right">
						<view class="text-shadow text-blod text-lg"  @click="showLog(4)">
							直邀请团员<text class="cuIcon-right"></text>
						</view>
						<view class="text-color-main text-xl margin-top-sm">
							{{ userInfo.zy_member }}
						</view>
					</view>
					<view>
						<view class="text-shadow text-blod text-lg"  @click="showLog(5)">
							间邀团员<text class="cuIcon-right"></text>
						</view>
						<view class="text-color-main text-xl margin-top-sm">
							{{ userInfo.jy_member }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="adv margin-top-lg">
				<u-notice-bar :text="text1" mode="link" speed="50" :bgColor="themeColor" color='#fff' url="/pages/componentsB/tag/tag"></u-notice-bar>
			</view>
			
			<view class="margin-top-lg flex justify-between bg-white text-black align-center padding-sm radius-lg" style="border-radius: 100rpx;">
				<text class="text-lg">招募教学</text>
				<text>但唯独我i哦俄方300</text>
				<text>去学习<text class="cuIcon-right"></text></text>
			</view>
			
			<view class="my-action">
				<view class="solid-bottom solid-left solid-right solid-top radius-lg bg-white">
					<view class="grid col-4 text-center margin-top-lg padding-top-lg padding-bottom-lg">
						<view class="">
							<u-icon name="share-square" :color="themeColor" size="28" labelPos="top"></u-icon>
							<view class=" text-lg text-blod">邀请好友</view>
						</view>
						<view class="">
							<u-icon name="share-square" :color="themeColor" size="28" labelPos="top"></u-icon>
							<view class=" text-lg text-blod">关注</view>
							
						</view>
						<view class="">
							<u-icon name="share-square" :color="themeColor" size="28" labelPos="top"></u-icon>
							<view class=" text-lg text-blod">联系</view>
						</view>
						<view class="">
							<u-icon name="share-square" :color="themeColor" size="28" labelPos="top"></u-icon>
							<view class="text-lg text-blod">设置</view>
							
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import {checkToken,getMemberInfo} from "@/api/user.js"
	export default {
		data() {
			return {
				text1:'回新疆诶我的；诶我让你服务而烦恼我',
				userInfo:{
					blance:'***',
					total_self_blance:'***',
					total_amt:'***',
					zy_member:'***',
					jy_member:'***',
				},
				isLogin:false,
			}
		},
		onPageScroll(e) {
			this.$refs.myCuCustom.pageScroll(e);
		},
		onShow() {
			this.checkLogin();
			
			
		},
		methods: {
			async checkLogin(){
				const ret = await checkToken();
				if(ret.data.is_useful){
					this.isLogin = true;
				}
				this.getUserInfo();
			},
			getUserInfo(){
				if(this.isLogin){
					getMemberInfo().then(ret => {
						this.userInfo = ret.data;
					});
				}
			},
			showLog(type){
				switch (type){
					case 1://余额记录
					case 2:
					case 3:
						this.toPage('/pages/my/blance');
					break;	
					case 4://团队记录
					case 5:
						this.toPage('/pages/my/team');
					break;	
				}
			}
		}
	}
</script>

<style lang="scss">
	.cu-custom-content-gradient-bg{
		background: linear-gradient(to bottom, $--theme-color, rgba(251, 222, 55, 0.0));
	}
	.top-share{
		padding: 3px 10px;
		border-radius: 15px;
	}
	.cu-custom-content{
		height: 10rem;
	}
	.cu-avatar.lg {
		height: 130rpx;
		width: 130rpx;
	}
	.page-body{
		margin-top: -6rem;
	}
</style>
